<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='../../vue/vue.js'></script>
</head>



<body>



    <div id='app'>
        <myheader></myheader>
        <myfooter></myfooter>
    </div>
</body>





<template id="header">
    <div>

        {{title}}
    </div>
</template>

<template id="footer">
    <div>
    <ul>
        <li @click="change('首页')">首页</li>
        <li @click="change('分类')">分类</li>
        <li @click="change('购物')">购物</li>
        <li @click="change('我的')">我的</li>
    </ul>
    </div>
</template>



<script>
    const bus = new Vue()
    const myheader = {
        data() {
            return {
                title: '首页'
            }
        },
        template: '#header',
        mounted() {
            bus.$on('my-event', val => {
                this.title = val
            })
        },
    }

    const myfooter = {
        template: '#footer',
        methods: {
            change(val) {
                bus.$emit('my-event', val)
            }
        },
    }
    const vm = new Vue({
        data: {

        },
        components: {
            myheader,
            myfooter
        }
    }).$mount('#app')
</script>

</html>